<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-input v-model="condition.id" placeholder="请输入要查询的订单编号" @input="selectByPage(1)"/>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-select
                v-model="condition.status"
                clearable
                placeholder="请选择状态"
                :value-on-clear="null"
                style="width: 200px"
                @change="selectByPage(1)">
              <el-option label="未支付" value="0"/>
              <el-option label="已支付" value="1"/>
              <el-option label="已发货" value="2"/>
              <el-option label="已收货" value="3"/>
              <el-option label="退货退款" value="4"/>
              <el-option label="退换货" value="5"/>
              <el-option label="仅退款" value="6"/>
              <el-option label="售后" value="7"/>
              <el-option label="其它" value="8"/>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" border style="width: 100%">
          <el-table-column prop="id" label="ID"/>
          <el-table-column label="订单状态">
            <template #default="scope">
              <el-button type="danger" v-if="scope.row.status === 0">未支付</el-button>
              <el-button size="small" type="success" @click="updateStatus(scope.row.id)" v-if="scope.row.status === 1">
                发货(已付款)
              </el-button>
              <el-button type="success" v-if="scope.row.status === 2">已发货</el-button>
              <el-button type="primary" v-if="scope.row.status === 3">已收货</el-button>
              <el-button type="success" v-if="scope.row.status === 4" @click="begin1(scope.row.id)">退货退款</el-button>
              <el-button type="success" v-if="scope.row.status === 5">退换货</el-button>
              <el-button type="success" v-if="scope.row.status === 6" @click="begin(scope.row.id)">仅退款</el-button>
              <el-button type="success" v-if="scope.row.status === 7">售后</el-button>
              <el-button size="small" type="success" v-if="scope.row.status === 8">拒绝</el-button>
              <el-button size="small" type="success" v-if="scope.row.status === 9">已退货退款</el-button>
              <el-button size="small" type="success" v-if="scope.row.status === 10">已退款</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间"/>
          <el-table-column label="快递单号">
            <template #default="scope">
              <el-tag type="primary" v-if="scope.row.express==null">非快递</el-tag>
              <el-text v-else>{{ scope.row.express }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="payType" label="支付方式">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.payType===0">余额支付</el-tag>
              <el-tag type="success" v-if="scope.row.payType===1">支付宝</el-tag>
              <el-tag type="success" v-if="scope.row.payType===2">微信</el-tag>
              <el-tag type="success" v-if="scope.row.payType===3">银联</el-tag>
              <el-tag type="success" v-if="scope.row.payType===4">其他</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="addr.contact" label="联系人"/>
          <el-table-column prop="addr.province" label="省"/>
          <el-table-column prop="addr.city" label="市"/>
          <el-table-column prop="addr.district" label="区县"/>
          <el-table-column prop="addr.street" label="乡镇街道"/>
          <el-table-column prop="addrDetail" label="详细地址"/>
          <el-table-column label="操作" width="100px">
            <template #default="scope">
              <el-popover placement="right" :width="250" trigger="hover" style="display: flex; align-items: center">
                <template #reference>
                  <el-button size="small" type="success" @click="table = true" @mouseenter="selectById(scope.row.id)">
                    用户商品信息
                  </el-button>
                </template>
                <div style="font-size: 15px">
                  <div>姓名: {{ userInfo.username }}</div>
                  <div>性别: {{ userInfo.sex }}</div>
                  <div>电话: {{ userInfo.phone }}</div>
                  <div>邮箱: {{ userInfo.email }}</div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 15px;">
          <div class="example-pagination-block">
            <el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                           @change="selectByPage"
                           style="margin-top: 15px; display: flex; justify-content: center; align-items: center;"
                           v-model:current-page="pageInfo.pageNum"/>
          </div>
        </el-row>
        <el-drawer v-model="table" :title="drawerTitle" direction="btt" size="60%">
          <el-table :data="goodsList">
            <el-table-column label="商品图片">
              <template #default="scope">
                <el-popover placement="right" trigger="hover" v-if="scope.row.goods.picList.length>0">
                  <template #reference>
                    <el-image style="width: 30px;height: 30px"
                              :src="server + '/goods/pic/' +scope.row.goods.picList[0].url"
                              @mouseenter="console.log(server + '/goods/pic/' +scope.row.goods.picList[0].url)"/>
                  </template>
                  <el-image v-for="(pic,index) in scope.row.goods.picList" :key="index" :headers="headers"
                            style="width: 30px;height: 30px ;margin-right: 11px" :src="server + '/goods/pic/' + pic.url"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column property="goods.name" label="商品名称"/>
            <el-table-column property="count" label="购买数量"/>
            <el-table-column property="goods.count" label="剩余数量"/>
            <el-table-column property="goods.color" label="商品颜色"/>
            <el-table-column property="goods.dscp" label="商品描述"/>
            <el-table-column property="goods.price" label="商品价格"/>
            <el-table-column property="goods.version" label="商品版本"/>
          </el-table>
        </el-drawer>
      </el-card>
    </el-col>
  </el-row>
  <!--  退款开始-->
  <el-dialog v-model="addDialogShow" title="用户想退款" width="400">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateStatus1(a)">拒绝</el-button>
        <el-button type="primary" @click="update4(a)">同意</el-button>
      </div>
    </template>
  </el-dialog>
  <!--  退款结束-->
  <!--  退货退款开始-->
  <el-dialog v-model="addDialogShow1" title="用户想退货退款" width="400">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateStatus2(b)">拒绝</el-button>
        <el-button type="primary" @click="update2(b)">同意</el-button>
      </div>
    </template>
  </el-dialog>
  <!--  退货退款结束-->
</template>

<script setup>
import orderApi from "@/api/orderApi.js";
import {computed, ref} from "vue";
import {useTokenStore} from "@/stores/token.js";
import {ElMessage} from "element-plus";

const server = ref(import.meta.env.VITE_SERVER_ADDR)
const table = ref(false);
const tokenStore = useTokenStore();
const headers = computed(() => {
  let token = tokenStore.tokenStr;
  return {token}
})
//搜索条件
const condition = ref({
  id: null,
  status: null,
})

//分页信息
const pageInfo = ref({
  pages: 0,
  pageNum: 0,
  pageSize: 0
})
const userInfo = ref([]);
const goodsList = ref([])//商品列表
const drawerTitle = ref(''); // 抽屉标题
const a = ref()
const b = ref()
const addDialogShow = ref(false)
const addDialogShow1 = ref(false)

//根据id查询
function selectById(id) {
  orderApi.selectById1(id)
      .then(resp => {
        console.log(id)
        console.log(resp.data)
        console.log(resp.data.user)
        console.log(resp.data.orderDetailList)
        userInfo.value = resp.data.user
        goodsList.value = resp.data.orderDetailList;
        drawerTitle.value = `订单编号: ${resp.data.id}`
      })
}

//分页查询
function selectByPage(pageNum) {
  orderApi.selectByPage1(condition.value, pageNum, 5)
      .then(resp => {
        console.log(resp.data)
        pageInfo.value = resp.data;
      })
}

function updateStatus(orderId) {
  orderApi.selectById1(orderId)
      .then(resp => {
        console.log(resp.data)
        if (resp.code === 10000) {
          // 更新订单状态
          orderApi.updateStatus(orderId)
              .then(resp => {
                if (resp.code === 10000) {
                  ElMessage.success(resp.msg);
                  selectByPage(1);
                } else {
                  ElMessage.error(resp.msg);
                }
              });
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

selectByPage(1);

//退货的
function begin(id) {
  a.value = id;
  console.log(a.value)
  addDialogShow.value = true;
}

//退货退款的
function begin1(id) {
  b.value = id;
  console.log(b.value)
  addDialogShow1.value = true;
}

//拒绝退款的申请
function updateStatus1(orderId) {
  orderApi.selectById1(orderId)
      .then(resp => {
        console.log(resp.data)
        if (resp.code === 10000) {
          const order = resp.data;
          order.status = 8;
          // 更新订单状态
          orderApi.update1(order)
              .then(resp => {
                if (resp.code === 10000) {
                  addDialogShow.value = false;
                  ElMessage.success("拒绝成功,不退款");
                  selectByPage(1);
                } else {
                  ElMessage.error(resp.msg);
                }
              });
        } else {
          ElMessage.error("失效");
        }
      })
}

//同意退款的申请
function update4(id) {
  console.log(id)
  orderApi.update44(id)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg);
          addDialogShow.value = false;
          selectByPage(pageInfo.value.pageNum)
        } else {
          ElMessage.error("同意退款失败")
        }
      })
}

//拒绝退货退款的申请
function updateStatus2(orderId) {
  orderApi.selectById1(orderId)
      .then(resp => {
        console.log(resp.data)
        if (resp.code === 10000) {
          const order = resp.data;
          order.status = 8;
          // 更新订单状态
          orderApi.update1(order)
              .then(resp => {
                if (resp.code === 10000) {
                  addDialogShow1.value = false;
                  ElMessage.success("拒绝成功,不退货退款");
                  selectByPage(1);
                } else {
                  ElMessage.error(resp.msg);
                }
              });
        } else {
          ElMessage.error("失效");
        }
      })
}
//同意退货退款
function update2(id){
  orderApi.update22(id)
      .then(resp => {
        if(resp.code === 10000){
          ElMessage.success(resp.msg);
          addDialogShow1.value = false;
          selectByPage(pageInfo.value.pageNum)
        }else {
          ElMessage.error("同意退货退款失败")
        }
      })
}
</script>

<style scoped>

</style>